<template>
  <div class="panel">
    <vue3-seamless-scroll
      :list="productListRef"
      :step="stepRef"
      :hover="hoverRef"
      :limitScrollNum="limitScrollNumRef"
      :wheel="wheelRef"
      :direction="directionRef"
      class="seamless-warp"
    >
      <div class="product-info">
        <div v-for="(item, index) in productList" :key="index" class="product-item">
          <div class="product-icon">
            <img :src="item.iconUrl" :alt="item.name" />
          </div>
          <div class="info-column">
            <div class="product-name">{{ item.name }}</div>
            <div class="origin">{{ item.origin }}</div>
          </div>
          <div class="info-column">
            <div class="info-item">
              <span class="label">合格率：</span>
              <span class="value success">{{ item.qualifiedRate }}%</span>
            </div>
            <div class="info-item">
              <span class="label">出货日期：</span>
              <span class="value">{{ item.plantDate }}</span>
            </div>
          </div>
        </div>
      </div>
    </vue3-seamless-scroll>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

// 导入图片
import tomatoImg from '@/assets/img/food/img2.png'
import cornImg from '@/assets/img/food/110_玉米-16.png'
import pumpkinImg from '@/assets/img/food/img3.png'
import greenOnionImg from '@/assets/img/food/img4.png'
import dadouImg from '@/assets/img/food/img1.png'

// 模拟数据
const productList = [
  {
    name: '水稻',
    iconUrl: tomatoImg,
    origin: '山东省青岛市',
    qualifiedRate: 98.5,
    plantDate: '2024-09-15'
  },
  {
    name: '玉米',
    iconUrl: cornImg,
    origin: '河南省郑州市',
    qualifiedRate: 97.2,
    plantDate: '2024-12-01'
  },
  {
    name: '小麦',
    iconUrl: pumpkinImg,
    origin: '河北省石家庄市',
    qualifiedRate: 99.1,
    plantDate: '2025-01-20'
  },
  {
    name: '大豆',
    iconUrl: dadouImg,
    origin: '辽宁省沈阳市',
    qualifiedRate: 96.8,
    plantDate: '2025-02-10'
  },
  {
    name: '其他',
    iconUrl: greenOnionImg,
    origin: '陕西省西安市',
    qualifiedRate: 98.9,
    plantDate: '2025-01-25'
  }
]

const productListRef = ref(productList) as any
const stepRef = ref(0.5) as any
const hoverRef = ref(true) as any
const limitScrollNumRef = ref(2) as any
const wheelRef = ref(true) as any
const directionRef = ref<'up' | 'down' | 'left' | 'right'>('up') as any
</script>

<style scoped>
.panel {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.seamless-warp {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.product-info {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.product-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 20px;
  border: 1px solid rgba(51, 255, 208, 0.3);
  border-radius: 10px;
  background: rgba(51, 255, 208, 0.05);
  margin-bottom: 10px;
  height: 100px;
}

.product-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(51, 255, 208, 0.1);
  border-radius: 10px;
  padding: 10px;
  flex-shrink: 0;
}

.product-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.info-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-name {
  color: #33ffd0;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.2;
}

.origin {
  color: #fff;
  font-size: 16px;
  opacity: 0.8;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.label {
  color: #33ffd0;
  font-size: 16px;
  min-width: 70px;
}

.value {
  color: #fff;
  font-size: 16px;
}

.value.success {
  color: #67C23A;
}
</style>
